<template>
  <div class="todoline__container">
    <div class="todoline__prev" @click="change_status">
      <i id="icon_status" ref="icon_status" class="el-icon-minus"></i>
    </div>
    <p ref="content_status" class="todoline__content">{{ contentObj.content }}</p>

    <el-button
      class="todoline__after"
      type="danger"
      icon="el-icon-delete"
      size="mini"
      @click="delete_todo"
      circle
    ></el-button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      content: "",
    };
  },
  mounted() {
    this.update_status();
  },
  methods: {
    // 改变状态
    change_status() {
      // 被删除就跳过 normal 和 done 的选择
      if (this.contentObj.stat !== "delete") {
        this.contentObj.stat === "normal"
          ? (this.contentObj.stat = "done")
          : (this.contentObj.stat = "normal");
      }
      this.update_status();
    },
    // 更新状态
    update_status() {
      //   console.log("Change Stauts.", stat);
      switch (this.contentObj.stat) {
        case "normal":
          // 设置 正常 样式
          this.$refs.icon_status.className = "el-icon-minus";
          this.$refs.icon_status.style.color = "black";
          this.$refs.content_status.classList.remove("content_delete");
          break;
        case "done":
          // 设置 完成 样式
          this.$refs.icon_status.className = "el-icon-success";
          this.$refs.icon_status.style.color = "green";
          this.$refs.content_status.classList.add("content_delete");
          break;
        case "delete":
          // 设置 删除 样式 (应该是等不到看到这个样式就被删除了)
          this.$refs.icon_status.className = "el-icon-remove";
          this.$refs.icon_status.style.color = "gray";
          break;
      }
    },
    // 删除
    delete_todo() {
      console.log(
        "emit delete:",
        "\tid: ",
        this.contentObj.id,
        "\tcontent: ",
        this.contentObj.content
      );
      this.contentObj.stat = "delete";
      this.change_status();

      this.$emit("delete_single_todo", this.contentObj.id);
    },
  },
  props: ["contentObj"],
};

// 三种 icon 状态
// el-icon-minus    ->  none
// el-icon-success  ->  green
// le-icon-remove   ->  red * 0.3
</script>

<style lang="scss" scoped>
.todoline {
  &__container {
    border: 1px solid #555;

    margin-top: -1px;

    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  &__container:hover {
    background-color: #ddd;
  }

  &__prev {
    margin-left: 10px;
    margin-right: 10px;

    border: 1px solid gray;
    border-radius: 100%;

    width: 28px;
    height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  &__content {
    font-size: 16px;

    color: black;

    text-align: left;
  }
  &__after {
    font-size: 10px;

    margin-left: 10px;
    margin-right: 10px;
  }
}

#icon_status {
  vertical-align: middle;

  font-size: 18px;
}

.content_delete {
  text-decoration: line-through;

  color: gray;
}
</style>
